<template>
  <div>
    <div class="table-div">
      <!-- 表格头部面板 -->
      <div class="table-panel">
        <!-- 
                @keyup.native ---- 键盘松开事件
                @keyup.enter.native ---- 回车事件
        -->
        <el-input v-model="search.keyword" placeholder="房屋名/地址查询" class="filter-item"
          @keyup.enter.native="initTableData" @keyup.native="initTableData" />
        <el-button class="button-item" type="primary" icon="el-icon-edit" @click="addModel()">新增</el-button>
        <!-- :loading="downloadLoading" 表示点击导出按钮的时候，是否显示正在加载 -->
       
      </div>
      <!-- 
            表格
            @row-click ---- 行点击事件
            @select-all ---- 全选事件
            @select ---- 选择事件
            :default-sort="{ prop: 'id', order: 'descending' }"
      -->
      <el-table ref="list" :data="tableData.list" style="width: 100%; margin-top: 10px" border stripe
        highlight-current-row @sort-change="changeSort">
        <!-- 
                sortable ---- 未开启后台分页时使用
                sortable="custom" ---- 开启后台分页时使用，table 中用 sort-change 监听排序点击事件，执行事件的函数是我们自定义的,
                该函数的参数接收到的值是一个对象，其中有个属性prop，其值就是<el-table-column> 标签的property值。
                而下面的property的值要和<el-table>标签的:data绑定的对象的属性名一一对应。
        -->

        <el-table-column property="id" label="ID" width="80" align="center" sortable="custom"></el-table-column>
        <el-table-column property="name" label="房名" width="120" align="center" sortable="custom"></el-table-column>
        <el-table-column property="cityName" label="城市" width="120" align="center" sortable="custom"></el-table-column>
        <el-table-column property="address" label="地段" align="center" sortable="custom"></el-table-column>
        <el-table-column property="type" label="类型" width="120" align="center" sortable="custom"></el-table-column>
        <el-table-column property="floor" label="楼层" width="120" align="center" sortable="custom"></el-table-column>
        <el-table-column property="periphery" label="周边" align="center" sortable="custom"></el-table-column>
        <el-table-column property="price" label="价格" width="80" align="center" sortable="custom"></el-table-column>
        <el-table-column property="contact" label="联系方式" width="120" align="center" sortable="custom"></el-table-column>

        <el-table-column label="操作" width="130" align="center">
          <template slot-scope="scope">
            <!-- scope.row，这里的row对象就是 该行的数据，对象中的属性名就是 <el-table>标签的:data绑定的对象的属性名 -->
            <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
              @click="editModel(scope.row)"></el-button>
            <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
              @click="deleteModel(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 
            分页
            :tableData ---- 将 tableData 作为参数传递给子组件 Pagination
            @emitPageData ---- 子组件 $emit 函数定义的 key
            receivePageData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
      -->
      <Pagination :tableData="tableData" @emitPageData="receivePageData"></Pagination>
      <!-- 
            Model 编辑弹出窗
            :dialogData ---- 將 dialogData 作为参数传递给子组件 userEdit.vue
            @emitDialogData ---- 子组件 $emit 函数定义的 key
            receiveDialogData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
      -->
      <HouseEdit :dialogData="dialogData" @emitDialogData="receiveDialogData"></HouseEdit>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/fragments/Pagination.vue";
import HouseEdit from "@/components/accounts/HouseEdit.vue";
export default {
  name: "Users",
  components: {
    Pagination,
    HouseEdit
  },
  data() {
    return {
      // 表格数据结构,传回来的是pageInfo类
      tableData: {
        pageNum: 1,
        pageSize: 5,
        total: 36,
        list: [] // 当前页数据集合
      },
      // 查询参数,search传过去的是search类
      search: {
        currentPage: 1,
        pageSize: 5,
        keyword: "",
        sort: "id",
        direction: "asc"
      },
      // 编辑窗口初始数据，showEditDialog: false，泽一开始不会显示模态框
      dialogData: {
        // 拥护id，如果为0则表示不存在的用户，也就是添加用户
        id: 0,
        // 是否显示编辑窗口
        showEditDialog: false
      },
      // 是否显示 loading
      downloadLoading: false
    };
  },
  methods: {
    // 初始化表单数据
    initTableData: function () {
      var self = this;
      // if(self.search.keyword!=""){

      // }
      $.ajax({
        url: "http://127.0.0.1:8000/api/house/showHouse",
        type: "post",
        contentType: "application/json",
        data: JSON.stringify(self.search),
        success: function (rs) {
          console.log(rs);
          self.tableData = rs;
        },
        error: function (data) {
          // TODO
        }
      });
    },
    // 排序
    changeSort: function (obj) {
      this.search.sort = this.$Common.camecaseToLine(obj.prop);
      this.search.direction = obj.order == "descending" ? "desc" : "asc";
      this.initTableData();
    },
    // 接收子子组件数据的函数
    receivePageData: function (tableData) {
      this.search.currentPage = tableData.pageNum;
      this.search.pageSize = tableData.pageSize;
      this.initTableData();
    },
    // 接收表单数据
    receiveDialogData: function (showEditDialog) {
      this.dialogData.showEditDialog = showEditDialog;
      this.initTableData();
    },
    // 新增 model
    addModel: function () {
      this.dialogData = {
        id: 0,
        showEditDialog: true
      };
    },
    // 编辑 model
    editModel: function (row) {
      console.log(row);
      this.dialogData = {
        id: row.id,
        showEditDialog: true
      };
    },
    // 删除 model
    deleteModel: function (row) {
      this.$confirm("确定要删除当前行吗？", "删除", {
        comfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var self = this;
          $.ajax({
            url: "http://127.0.0.1:8000/api/house/delete/" + row.id,
            type: "delete",
            success: function (rs) {
              if (rs.status == 200) {
                self.$message.success(rs.message);
                self.initTableData();
              } else {
                self.$message.info(rs.message);
              }
            },
            error: function (data) {
              // TODO
            }
          });
        })
        .catch(() => { });
    }
  },
  mounted() {
    this.initTableData();
  },
  watch:{
    'search.keyword':{
      handler(){         
        this.search.currentPage=1;
      }
    }
  }
};
</script>

<style>
.table-div {
  margin-top: 10px;
}

.filter-item {
  float: right;
  width: 200px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  /* margin-right: 5px; */
}

.button-item {
  float: left;
  width: 100px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-right: 5px;
}
</style>
